<template>
	<view class="pageContent">
		<view class="userInfo-card">
			<open-data class="avatar" v-if="token" type="userAvatarUrl"></open-data>
			<image class="avatar" v-if="!token" :src="localImages +'/avatar.png'" mode="widthFix" />
			<view class="loginBt" v-if="!token" @click="loginRed">
				点击登录
			</view>
			<div class="basic" v-if="token">
				<div class="username">
					<open-data v-if="1" type="userNickName"></open-data>
					<text class="userType">
						{{userMsg.roleName || '补货员'}}
					</text>
				</div>
				<div>{{userInfo.mobile || ''}}</div>
			</div>
		</view>

		<view class="navsItem" @click="systemSet" v-if="token && 0">
			<image class="navsItemIcon" :src="localImages +'/yw-mySet.png'" />
			<view class="navsItemTil">补货明细</view>
			<view class="rightArrow"></view>
		</view>
		<view class="navsItem" @click="goWeb" v-if="token">
			<image class="navsItemIcon" :src="localImages +'/yw-mySet.png'" />
			<view class="navsItemTil">补货提成</view>
			<view class="rightArrow"></view>
		</view>
		<button class="btOne btBottom" v-if="token" @click="loginOut">退出登录</button>

		<scModel class="model" :show="isModel" title="温馨提示" :isShowCancel="0" :isCenter="1" :isShowClose="0"
			height="670" @change="changeModel">
			<view class="model-tip">请“长按二维码”,前往公众号查看</view>
			<view  class="model-code">
				<image class="model-code-img" :src="localImages +'/codeLove.png'" show-menu-by-longpress="true" />

			</view>
		</scModel>
	</view>
</template>

<script>
	import config from '../../static/config.js'
	import util from '../../static/utils/util.js'
	import scModel from '@/components/scModel/scModel.vue'
	export default {
		components: {
			scModel
		},
		data() {
			return {
				images: config.images,
				localImages: config.localImages,
				title: '123',
				token: '',
				userInfo: '',
				isModel: 0,
			}
		},
		onLoad() {},
		onShow() {
			var token = wx.getStorageSync('token');
			this.token = token
			var userInfo = wx.getStorageSync('userInfo');
			if (token) {
				this.userInfo = userInfo
			}
		},
		methods: {
			loginRed() {
				wx.navigateTo({
					url: '/pages/index/login1'
				})
			},
			goWeb() {
				wx.navigateTo({
					url: '/pages/index/web'
				})
			},
			systemSet() {
				if (this.token) {
					// util.toast('请前往公众号查看')
					this.showModel()
				} else {
					this.loginRed()
				}
			},
			showModel() {
				this.isModel = true
			},
			changeModel() {
				console.log('changeModel')
				this.isModel = false
			},
			loginOut() {
				wx.removeStorageSync('token')
				wx.redirectTo({
					url: '/pages/index/login1'
				})
			},
		},

	}
</script>

<style lang="scss" scoped>
	.pageContent {}

	.container {
		width: 132rpx;
		height: 132rpx;
	}

	.userInfo-card {
		position: relative;
		display: flex;
		width: 100vw;
		padding: 30rpx 30rpx 30rpx 30rpx;
		background-color: #FFFFFF;
		/* border: 1px solid #f00; */
	}

	.avatar {
		width: 132rpx;
		height: 132rpx;
		border-radius: 50%;
		/* 因为使用border-radius: 50% ；类似于给它加了边框。但是是透明的，只有加overflow: hidden；轮廓才会渲染出来。 */
		overflow: hidden;
		margin-right: 33rpx;
	}

	.loginBt {
		height: 50rpx;
		line-height: 50rpx;
		color: #3862AC;
		border: 1px solid #3862AC;
		border-radius: 8rpx;
		padding: 0rpx 10rpx 0rpx 10rpx;
	}

	.username {
		font-size: 34rpx;
		line-height: 66rpx;
	}

	.userType {
		background: #3862AC;
		color: #FFFFFF;
		font-size: 26rpx;
		border-radius: 30rpx;
		padding: 6rpx 16rpx 6rpx 16rpx;
		margin-left: 20rpx;
	}

	.userAddr {
		color: #838383;
		font-size: 26rpx;
		line-height: 36rpx;
	}

	.userChange {
		position: relative;
		margin: 34rpx 0rpx 0rpx auto;
		padding: 0rpx 30rpx 0rpx 0rpx;
		color: #838383;
		line-height: 34rpx;
		white-space: nowrap;

		.rightArrow {
			right: 0rpx;
			top: 4rpx;
			width: 22rpx;
			height: 22rpx;
		}
	}

	.navsItem {
		display: flex;
		padding: 32rpx 0rpx 32rpx 30rpx;
		margin: 12rpx 0rpx 0rpx 0rpx;
		background: #FFFFFF;
	}

	.navsItemIcon {
		display: inline-block;
		width: 36rpx;
		height: 36rpx;
		/* background: #3862AC; */
	}

	.navsItemTil {
		height: 42rpx;
		font-size: 30rpx;
		color: #030303;
		line-height: 42rpx;
		margin-left: 14rpx;
	}

	.rightArrow {
		right: 40rpx;
		margin-top: 6rpx;
		height: 22rpx;
		width: 22rpx;
	}

	.btBottom {
		position: fixed;
		width: 600rpx;
		bottom: 180rpx;
		left: 50%;
		margin-left: -300rpx;
	}

	.model {
		display: flex;
	}

	.model-tip {
		font-size: 34rpx;
		text-align: center;
		padding: 20rpx;
		color: #3862AC;
		
	}
	
	.model-code{
		display: flex;
		justify-content: center;
		// border: red solid;
	}

	.model-code-img {
		// display: flex;
		width: 400rpx;
		height: 400rpx;
		// margin-right: 100rpx;
	}
</style>
